<template>
	<view class="user clearfix  hv100 ">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">我的银行卡</block>
			<block slot="right"><text class="mr15" @click="pushPage('/pages/Receivables/bank/delbank')">管理</text></block>
		</cu-custom>
		<scroll-view class="scroll-view bank px15 mt15" scroll-y @scrolltolower="OnReachBottom">
			<view class="radius-5 flex flex-direction px20 " :class="{mt15:index!=0}" v-for="(item,index) in bList" :key="index"  :style="'background-color:'+item.bankcolor">
				<view class="flex align-center mt20">
					<image :src="'/static/bank/bank'+item.bankindex+'.png'" class="block40" mode=""></image>
					<view class="flex align-center justify-start text-white f18 ml10  ellipsis">{{item.bankName}}储蓄卡</view>
				</view>
				<view class="wp100 pt20 pb20 flex align-end tetx-le    f18 text-white">
					<text>****</text>
					<text class="ml20">****</text>
					<text class="ml20">****</text>
					<text class="ml20 f22">{{item.bankNum}}</text>
				</view>
				<view class="flex align-center justify-end mb10">
					<image src="/static/bank/yinlian.png" class="block28-175" mode=""></image>
				</view>
			</view>
		</scroll-view> 
		<view class="addbank discenter radius-30" @click="pushPage('/pages/Receivables/bank/addbank')">添加银行卡</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			bList:[],
			linshiList:[{bankName:'北京银行',bankNumber:'1234567'},{bankName:'渤海银行',bankNumber:'7654321'}],
			bankList: {
					'北京银行':{
					bankbg:'#ED372F',
					id:0,
				
				}, 
				'渤海银行':{
					bankbg:'#f5a623',
					id:1,
					
				}, 
				'沧州银行':{
					bankbg:'#0E6AF4',
					id:2,
					
				}, 
				'成都银行':{
					bankbg:'#ED372F',
					id:3,
					
				}, 
				'承德银行':{
					bankbg:'#ED372F',
					id:4,
					
				}, 
				'大连银行':{
					bankbg:'#0E6AF4',
					id:5,
					
				},
				'德州市商业银行':{
					bankbg:'#ED372F',
					id:6,
					
				}, 
				'德州银行':{
					bankbg:'#ED372F',
					id:7,
					
				}, 
				'东营市商业银行':{
					bankbg:'#f5a623',
					id:8,
					
				}, 
				'广东发展银行':{
					bankbg:'#f5a623',
					id:9,
					
				},
				'广发银行':{
					bankbg:'#f5a623',
					id:10,
					
				}, 
				'广州农村信用合作社':{
					bankbg:'#049C4F',
					id:11,
					
				},
				'广州农商银行':{
					bankbg:'#0E6AF4',
					id:12,
					
				}, 
				'广州商业银行':{
					bankbg:'#049C4F',
					id:13,
					
				},
				'广州银行':{
					bankbg:'#9B732D',
					id:14,
					
				}, 
				'海南银行':{
					bankbg:'#0E6AF4',
					id:15,
					
				}, 
				'邯郸银行':{
					bankbg:'#0E6AF4',
					id:16,
					
				},
				'河北银行':{
					bankbg:'#0E6AF4',
					id:17,
					
				}, 
				'衡水银行':{
					bankbg:'#000000',
					id:18,
					
				}, 
				'花旗银行':{
					bankbg:'#000000',
					id:19,
					
				}, 
				'华夏银行':{
					bankbg:'#9B732D',
					id:20,
					
				}, 
				'汇丰银行':{
					bankbg:'#40194d',
					id:21,
					
				}, 
				'交通银行':{
					bankbg:'#0E6AF4',
					id:22,
					
				}, 
				'廊坊银行':{
					bankbg:'#0E6AF4',
					id:23,
					
				}, 
				'辽阳银行':{
					bankbg:'#049C4F',
					id:24,
				
				}, 
				'南京银行':{
					bankbg:'#62606b',
					id:25,
					
				}, 
				'宁波银行':{
					bankbg:'#ED372F',
					id:26,
					
				}, 
				'平安银行':{
					bankbg:'#000000',
					id:27,
					
				}, 
				'齐鲁银行':{
					bankbg:'#0E6AF4',
					id:28,
					
				},
				'青岛银行':{
					bankbg:'#049C4F',
					id:29,
					
				}, 
				'瑞丰银行':{
					bankbg:'#0E6AF4',
					id:30,
					
				}, 
				'瑞士银行':{
					bankbg:'#000000',
					id:31,
					
				}, 
				'厦门商业银行':{
					bankbg:'#f5a623',
					id:32,
					
				}, 
				'上海农村商业银行':{
					bankbg:'#62606b',
					id:33,
					
				}, 
				'上海浦东发展银行':{
					bankbg:'#0E6AF4',
					id:34,
					
				},
				'上海银行':{
					bankbg:'#000000',
					id:35,
					
				}, 
				'深圳发展银行':{
					bankbg:'#9B732D',
					id:36,
					
				}, 
				'盛京银行':{
					bankbg:'#ED372F',
					id:37,
					
				}, 
				'天津银行':{
					bankbg:'#0E6AF4',
					id:38,
				
				}, 
				'兴业银行':{
					bankbg:'#0E6AF4',
					id:39,
					
				},
				'张家口银行':{
					bankbg:'#ED372F',
					id:40,
					
				},
				'长沙银行':{
					bankbg:'#ED372F',
					id:41,
					
				}, 
				'招商银行':{
					bankbg:'#ED372F',
					id:42,
					
				},
				'浙商银行':{
					bankbg:'#f5a623',
					id:43,
					
				},
				'郑州银行':{
					bankbg:'#9B732D',
					id:44,
					
				}, 
				'中国工商银行':{
					bankbg:'#0E6AF4',
					id:45,
					
				}, 
				'中国光大银行':{
					bankbg:'#0E6AF4',
					id:46,
					
				},
				'中国建设银行':{
					bankbg:'#049C4F',
					id:47,
					
				},
				'中国民生银行':{
					bankbg:'#049C4F',
					id:48,
					
				},
				'中国农业发展银行':{
					bankbg:'#049C4F',
					id:49,
				
				}, 
				'中国农业银行':{
					bankbg:'#049C4F',
					id:50,
					
				}, 
				'中国银行':{
					bankbg:'#ED372F',
					id:51,
					
				},
				'中国邮政':{
					bankbg:'#049C4F',
					id:52,
					
				}, 
				'中信实业银行':{
					bankbg:'#ED372F',
					id:53,
					
				}
			},
		}
	},
	onShow() {
		this.getData()
	},
	computed:{
		...mapState(['selbank'])
	},
	methods: {
		...mapActions(['setBank']),
		async getData() {
			let {
				data
			} = await this.$http.post('user.bankindex', {}, { tipConfig: { storeBlock: true } })
			this.bList=data.map((v) =>{
				return {...v,bankindex:0,bankcolor:''}
			})
			this.bList.forEach((item)=>{
				item.bankNum=item.number.slice(-4)
				if(this.bankList[item.bankName]){
					item.bankindex=this.bankList[item.bankName].id
					item.bankcolor=this.bankList[item.bankName].bankbg
				 }else{
				 	item.bankindex=this.bankList['北京银行'].id
					item.bankcolor=this.bankList['北京银行'].bankbg
				 }
			})
		},
		cbankid(item,index){
			this.setBank(item)
		},
		
	}
}
</script>

<style lang="less">
.payline{
	width: 100%;
	height: 1rpx;
	background-color: #F2F2F2;
}
.red-button{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 90rpx;
	border-radius: 10rpx;
	background-color: #D73329;
	color: #FFFFFF;
	margin-top:80rpx ;
}
.block28-175{
	width: 56rpx;
	height: 35rpx;
}
.addbank{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 90rpx;
	border: 1rpx solid #D73329;
	position: absolute;
	bottom: 60rpx;
	color: #D73329;
}
</style>
